<template>
	<div class="vip" shadow="never">
		<!--个人信息索引-->
		<div class="vip_tro">
			会员管理
			<div class="hr"></div>
		</div>
		<div class="vip_text">
			当前vip等级：<span>{{vip_lv}}</span>
		</div>
		<div class="vip_text">
			截止时间：<span>{{end_date}}</span>
		</div>
		<!--会员购买-->
		<div class="vip_lvs">

			<div class="vip_lv1">
				<div class="vip_buy">
					<div class="vip_lvs_title">
						Lv 1
					</div>
					<div class="vip_lvs_money">
						<span class="vip_lvs_money_small">￥</span><span class="vip_lvs_money_big">30</span><span class="vip_lvs_money_small">/月</span>
					</div>
					<div class="vip_lvs_time">
						<el-input-number v-model="vip_num_lv1" :min="1" :max="12" label="描述文字" :disabled="display_lv1"></el-input-number>
					</div>
					<div class="vip_lvs_bt">
						<el-button type="info" @click="buy(1,vip_num_lv1)" v-text="`支付：${vip_num_lv1*30}元`" :disabled="display_lv1"></el-button>
					</div>
				</div>
				<!--优惠-->
				<div class="vip_lvs_rights">
					<div class="vip_lvs_right">
						<span class="vip_lvs_right_1">会员专属红包</span><span class="vip_lvs_right_1_1"><i class="el-icon-check"></i></span>
					</div>
					<div class="vip_lvs_right">
						<span class="vip_lvs_right_2">菜品折扣</span>
					</div>
					<div class="vip_lvs_right">
						<span class="vip_lvs_right_2">优先配送</span>
					</div>
				</div>
			</div>

			<div class="vip_lv2">
				<div class="vip_buy">
					<div class="vip_lvs_title">
						Lv 2
					</div>
					<div class="vip_lvs_money">
						<span class="vip_lvs_money_small">￥</span><span class="vip_lvs_money_big">60</span><span class="vip_lvs_money_small">/月</span>
					</div>
					<div class="vip_lvs_time">
						<el-input-number v-model="vip_num_lv2" :min="1" :max="12" label="描述文字" :disabled="display_lv2"></el-input-number>
					</div>
					<div class="vip_lvs_bt">
						<el-button type="info" @click="buy(2,vip_num_lv2)" v-text="`支付：${vip_num_lv2*60}元`" :disabled="display_lv2"></el-button>
					</div>
				</div>
				<!--优惠-->
				<div class="vip_lvs_rights">
					<div class="vip_lvs_right">
						<span class="vip_lvs_right_1">会员专属红包</span><span class="vip_lvs_right_1_1"><i class="el-icon-check"></i></span>
					</div>
					<div class="vip_lvs_right">
						<span class="vip_lvs_right_1">菜品折扣</span><span class="vip_lvs_right_1_1">95折</span>
					</div>
					<div class="vip_lvs_right">
						<span class="vip_lvs_right_2">优先配送</span>
					</div>
				</div>
			</div>

			<div class="vip_lv3">
				<div class="vip_buy">
					<div class="vip_lvs_title">
						Lv 3
					</div>
					<div class="vip_lvs_money">
						<span class="vip_lvs_money_small">￥</span><span class="vip_lvs_money_big">90</span><span class="vip_lvs_money_small">/月</span>
					</div>
					<div class="vip_lvs_time">
						<el-input-number v-model="vip_num_lv3" :min="1" :max="12" label="描述文字" :disabled="display_lv3"></el-input-number>
					</div>
					<div class="vip_lvs_bt">
						<el-button type="info" @click="buy(3,vip_num_lv3)" v-text="`支付：${vip_num_lv3*90}元`" :disabled="display_lv3"></el-button>
					</div>
				</div>
				<!--优惠-->
				<div class="vip_lvs_rights">
					<div class="vip_lvs_right">
						<span class="vip_lvs_right_1">会员专属红包</span><span class="vip_lvs_right_1_1"><i class="el-icon-check"></i></span>
					</div>
					<div class="vip_lvs_right">
						<span class="vip_lvs_right_1">菜品折扣</span><span class="vip_lvs_right_1_1">9折</span>
					</div>
					<div class="vip_lvs_right">
						<span class="vip_lvs_right_1">优先配送</span><span class="vip_lvs_right_1_1"><i class="el-icon-check"></i></span>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import VipService from "./VipService";
  import PersonalService from "../PersonalService";
  export default {
    name: "Vip",
	  data(){
      return{
				vip_lv:'',
				end_date:'',
        vip_num_lv1:1,
        total_money_lv1:30,
        display_lv1:false,
        vip_num_lv2:1,
        total_money_lv2:60,
        display_lv2:false,
        vip_num_lv3:1,
        total_money_lv3:90,
        display_lv3:false,
        loginUser:{},
	      vip:{}
      }
	  },
	  methods:{
			buy(vip_lv,vip_time){
				VipService.becomeVipService({
					vip_lv:vip_lv,
					time:vip_time
				},r=>{
				  if(r.msgFlag){
            this.$message({
              type: 'success',
              message: '充值成功！'
            });
				  }else if(r.Msg){
            this.$message({
              type: 'success',
              message: '充值成功！'
            });
				  }
          this.refresh();
				})
			},
		  //判断按钮是否可按
      refresh(){
        VipService.getVipLvService({
          user_id:this.loginUser.user_id
        },r=>{
          this.vip=r.vip;
          //console.log(this.vip);
					if(this.vip==null){
					  this.vip_lv='您还不是vip';
						this.end_date='您还不是vip';
					}else {
					  this.vip_lv=r.vip.vip_lv;
					  this.end_date=r.vip.end_date.substring(0,10);
					  if(this.vip_lv>=2){
              this.display_lv1=true;
					  }
					  if(this.vip_lv>=3){
              this.display_lv2=true;
            }
					}
        })
      }
	  },
	  created() {
      PersonalService.getLoginService({

      },r=>{
        //console.log(r);
        this.loginUser=r.loginUser;
        //console.log(this.loginUser.user_id)
        this.refresh();
      })
    }
  }
</script>

<style lang="less">
	.vip {
		width: 100%;
		height: 100%;
		margin: 20px;
		display: flex;
		flex-direction: column;
		//个人信息更改介绍
		.vip_tro {

			// margin-top: 20px;
			// margin-left: 10px;
			// margin-right: 60px;

			//background-color: lightblue;
			font-family: "Helvetica Neue";
			font-size: 26px;
			line-height: 28px;
			color: #606266; //字体颜色
			letter-spacing: 1px;
		}

		.hr {
			border-bottom: 1px solid #f5a8a8;
			height: 0px;
			margin-top: 10px;
		}

		.vip_text{
			font-family: "Helvetica Neue";
			margin-top: 5px;
		}
		.vip_lvs{
			display: flex;
			margin-top: 30px;
			.vip_buy{
				border: 1px solid #f5e2e2;
				box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);
				border-radius: 4px
			}
			.vip_lv1{
				background-color: white;
				height: 500px;
				width: 280px;
				margin-right: 20px;
			}
			.vip_lv2{
				background-color: #c5c7cb;
				height: 500px;
				width: 280px;
				margin-right: 20px;
			}
			.vip_lv3{
				background-color: #aaacaf;
				height: 500px;
				width: 280px;
			}

			.vip_lvs_title{
				text-align:center;
				font-family: "Helvetica Neue";
				font-size: 26px;
				margin-top: 40px;
			}
			.vip_lvs_money{
				margin-top: 50px;
				text-align:center;
				font-family: "Helvetica Neue";
				.vip_lvs_money_small{
					font-size:22px;
				}
				.vip_lvs_money_big{
					font-size:46px;
				}
			}
			.vip_lvs_time{
				margin-top: 50px;
				text-align: center;
				margin-right: auto;
				margin-left: auto;
			}
			.vip_lvs_bt{
				text-align: center;
				margin: 20px auto;
			}

			.vip_lvs_rights{
				margin: 20px;
				.vip_lvs_right{
					margin-bottom: 20px;
					.vip_lvs_right_1{

					}
					.vip_lvs_right_1_1{
						float:right
					}
					.vip_lvs_right_2{

						color: #9fa1a7;
					}
				}
			}


		}

	}
</style>